<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>聊天列表</title>
    <link rel="stylesheet" href="../css/aui.css">
     <link rel="stylesheet" href="../css/common.css">
     <script type="text/javascript" src="../script/api.js"></script>
    <script language="JavaScript" src="../script/vue.js"></script>
     <script language="JavaScript" src="../script/common.js"></script>
    <style type="text/css">
        .aui-list-item.wechat-top {
            background-color: #f3f3f7;
        }

        .aui-list .wechat-avatar {
            width: 3rem;
        }

        .wechat-avatar .aui-row-padded {
            background-color: #dddee0;
            padding: 0.1rem;
            border-radius: 0.2rem;
            margin-left: -0.05rem;
            margin-right: -0.05rem;
        }

        .wechat-avatar .aui-row-padded [class*=aui-col-xs-] {
            padding: 0.05rem;
        }
        .wechat-avatar,
        .wechat-avatar>img {
            border-radius: 0.2rem;
        }
    </style>
</head>

<body>
<div id="chatgroup" v-cloak>
    <div class="aui-content aui-margin-b-15"   v-if='token!=""'>
        <ul class="aui-list aui-media-list">

            <li class="aui-list-item aui-list-item-middle" v-for="item in chatgroup" @click="gochat(item)">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media wechat-avatar">
                        <div class="aui-badge" v-if="item.noreadnum>0">{{item.noreadnum}}</div>
                            <img onload="fnLoadImage(this)" :data-url="item.uinfo.logo_url"   src="../image/default_user_logo.png" />
                     </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title">{{item.uinfo.nickname}}</div>
                            <div class="aui-list-item-right">{{item.create_time_fmt}}</div>
                        </div>
                        <div class="aui-list-item-text aui-font-size-12">
                           {{item.last_msg}}
                        </div>
                    </div>
                </div>
            </li>

        </ul>
    </div>
    <div v-else>
      请先登录
    </div>
  </div>
</body>

<script type="text/javascript">
    var pvm = new Vue({
        el:'#chatgroup',
        data:{
            page:1,
            totalpage:1,
            totalnum:0,
            retback:true,
            chatgroup:[],
            token:'',

        },
        methods: {
            gochat:function (item) {
              $page.openwin('home_chat','./home/chat.html',{touid:item.touid});

            },
            getchatgroup:function () {
                 if(pvm.page>pvm.totalpage || !pvm.retback){
                    return;
                }
                pvm.retback =false;
                $page.get_data('/api/chat/getGroupList','post',{'page':pvm.page,'token':this.token},function (ret) {
                    pvm.totalpage = ret.data.totalpage;
                    pvm.page = pvm.page+1;
                    pvm.retback = true;
                    pvm.totalnum = ret.data.totalnum;

                    ret.data.list.forEach(function(el){
                        pvm.chatgroup.push(el);
                    });
                });
            },

            load_init:function () {
                pvm.page=1;
                pvm.getchatgroup();
            }
        }
     });
     apiready=function(){

        pvm.token = $api.getStorage('token');

         pvm.load_init();
         $page.pullup(function (ret) {
             pvm.getchatgroup();
         });
     }


</script>

</html>
